<template>
  <div class="echarts">
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="ts" name="cure">
import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import { computed, ref, watch } from "vue";
import { Statistic } from "@/api/interface";

// 定义 props 接收父组件传递过来的数据
const props = defineProps<{
  statistic: Statistic.ResStatistic; // 这里的类型需要根据你的数据结构来定义
}>();

console.log(props.statistic);
// 监听 statistic prop 的变化
watch(
  () => props.statistic,
  newValue => {
    console.log(newValue);
    // 当 statistic prop 发生变化时，更新 statistic ref
    curveData.value = newValue.curveDatas;
    console.log("curveDatas------");
    console.log(curveData);
    console.log(option);
  }
);

const curveData = ref([
  { value: 30, spotName: "0-11" },
  { value: 90, spotName: "12-23" },
  { value: 10, spotName: "24-35" },
  { value: 70, spotName: "36-47" },
  { value: 20, spotName: "48-59" },
  { value: 60, spotName: "60-71" },
  { value: 55, spotName: "72-83" },
  { value: 80, spotName: "84-95" },
  { value: 50, spotName: "96-107" },
  { value: 50, spotName: "108-120" }
]);

// const option: ECOption = {
//   tooltip: {
//     trigger: "axis",
//     backgroundColor: "transparent",
//     axisPointer: {
//       type: "none"
//     },
//     padding: 0,
//     formatter: (p: any) => {
//       let dom = `<div style="width:100%; height: 70px !important; display:flex;flex-direction: column;justify-content: space-between;padding:10px;box-sizing: border-box;
//       color:#fff; background: #6B9DFE;border-radius: 4px;font-size:14px; ">
//         <div style="display: flex; align-items: center;"> <div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>平台 :  ${p[0].name}</div>
//         <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>数据量 :  ${p[0].value}</div>
//       </div>`;
//       return dom;
//     }
//   },
//   toolbox: {
//     show: true,
//     orient: "horizontal"
//   },
//   grid: {
//     left: "0",
//     right: "0"
//   },
//   dataZoom: [
//     {
//       show: false,
//       height: 10,
//       xAxisIndex: [0],
//       bottom: 0,
//       startValue: 0,
//       endValue: 9,
//       handleStyle: {
//         color: "#6b9dfe"
//       },
//       textStyle: {
//         color: "transparent"
//       }
//     },
//     {
//       type: "inside",
//       show: true,
//       height: 0,
//       zoomLock: true
//     }
//   ],
//   xAxis: [
//     {
//       type: "category",
//       data: curveData.value.map((val: any) => {
//         return {
//           value: val.spotName
//         };
//       }),
//       axisTick: {
//         show: false
//       },
//       axisLabel: {
//         margin: 20,
//         interval: 0,
//         color: "#a1a1a1",
//         fontSize: 14,
//         formatter: function (name: string) {
//           undefined;
//           return name.length > 8 ? name.slice(0, 8) + "..." : name;
//         }
//       },
//       axisLine: {
//         lineStyle: {
//           color: "#c0c0c0"
//         }
//       }
//     }
//   ],
//   yAxis: [
//     {
//       min: 0,
//       axisLine: {
//         show: false
//       },
//       axisTick: {
//         show: false
//       },
//       splitLine: {
//         show: true,
//         lineStyle: {
//           color: "#c0c0c0"
//         }
//       },
//       axisLabel: {
//         color: "#a1a1a1",
//         fontSize: 16,
//         fontWeight: 400,
//         formatter: function (value: number) {
//           if (value === 0) {
//             return value + "";
//           } else if (value >= 10000) {
//             return value / 10000 + "w";
//           }
//           return value + "";
//         }
//       }
//     }
//   ],
//   series: [
//     {
//       name: "Direct",
//       type: "bar",
//       data: computed(() =>
//         curveData.value.map(val => {
//           return {
//             value: val.value
//           };
//         })
//       ).value,
//       barWidth: "45px",
//       itemStyle: {
//         color: "#C5D8FF",
//         borderRadius: [12, 12, 0, 0]
//       },
//       emphasis: {
//         itemStyle: {
//           color: "#6B9DFE"
//         }
//       }
//     }
//   ]
// };

// 使用 computed 生成动态的 option 配置
const option = computed<ECOption>(() => ({
  tooltip: {
    trigger: "axis",
    backgroundColor: "transparent",
    axisPointer: {
      type: "none"
    },
    padding: 0,
    formatter: (p: any) => {
      return `<div style="width:100%; height: 70px !important; display:flex;flex-direction: column;justify-content: space-between;padding:10px;box-sizing: border-box;
      color:#fff; background: #6B9DFE;border-radius: 4px;font-size:14px;">
        <div style="display: flex; align-items: center;"> <div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>年龄 :  ${p[0].name}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>访问量 :  ${p[0].value}</div>
      </div>`;
    }
  },
  toolbox: {
    show: true,
    orient: "horizontal"
  },
  grid: {
    left: "0",
    right: "0"
  },
  dataZoom: [
    {
      show: false,
      height: 10,
      xAxisIndex: [0],
      bottom: 0,
      startValue: 0,
      endValue: 9,
      handleStyle: {
        color: "#6b9dfe"
      },
      textStyle: {
        color: "transparent"
      }
    },
    {
      type: "inside",
      show: true,
      height: 0,
      zoomLock: true
    }
  ],
  xAxis: [
    {
      type: "category",
      data: curveData.value.map(val => ({
        value: val.spotName
      })),
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 20,
        interval: 0,
        color: "#a1a1a1",
        fontSize: 14,
        formatter: (name: string) => (name.length > 8 ? name.slice(0, 8) + "..." : name)
      },
      axisLine: {
        lineStyle: {
          color: "#c0c0c0"
        }
      }
    }
  ],
  yAxis: [
    {
      min: 0,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#c0c0c0"
        }
      },
      axisLabel: {
        color: "#a1a1a1",
        fontSize: 16,
        fontWeight: 400,
        formatter: (value: number) => (value === 0 ? value + "" : value >= 10000 ? value / 10000 + "w" : value + "")
      }
    }
  ],
  series: [
    {
      name: "Direct",
      type: "bar",
      data: curveData.value.map(val => ({ value: val.value })),
      barWidth: "45px",
      itemStyle: {
        color: "#C5D8FF",
        borderRadius: [12, 12, 0, 0]
      },
      emphasis: {
        itemStyle: {
          color: "#6B9DFE"
        }
      }
    }
  ]
}));
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
